<template>
  <view class="date-range-selector">
    <view class="date-range" @click="togglePopup">
      <view class="date-range-text">
        <text>{{ formatDate(startDate) }} 至 {{ formatDate(endDate) }}</text>
      </view>
      <wd-icon name="arrow-down" size="12px" class="date-range-icon" :class="{ rotate: showPopup }"></wd-icon>
    </view>

    <!-- 弹出层 -->
    <wd-popup v-model="showPopup" position="bottom">
      <view class="date-popup">
        <view class="popup-header">
          <text class="popup-title">选择日期范围</text>
          <wd-icon name="close" size="16px" @click="closePopup"></wd-icon>
        </view>

        <view class="popup-content">
          <!-- 快速选择 -->
          <view class="quick-filters">
            <view
              v-for="(filter, index) in quickFilters"
              :key="index"
              class="filter-item"
              :class="{ active: currentFilter === index }"
              @click="applyQuickFilter(index)"
            >
              <text>{{ filter.name }}</text>
            </view>
          </view>

          <!-- 自定义日期范围 -->
          <view class="custom-range">
            <view class="date-input" @click="openStartDatePicker">
              <text class="date-label">开始日期</text>
              <text class="date-value">{{ formatDate(startDate) }}</text>
            </view>
            <text class="date-separator">至</text>
            <view class="date-input" @click="openEndDatePicker">
              <text class="date-label">结束日期</text>
              <text class="date-value">{{ formatDate(endDate) }}</text>
            </view>
          </view>

          <!-- 确认按钮 -->
          <view class="confirm-button">
            <wd-button type="primary" block @click="confirmDateRange">确认</wd-button>
          </view>
        </view>
      </view>
    </wd-popup>

    <view style="height: 0; width: 0; overflow: hidden">
      <!-- 隐藏的日期选择器 -->
      <wd-datetime-picker ref="startDatePicker" v-model="startDate" title="选择开始日期" type="date" :max="endDate" @confirm="onStartDateConfirm" />

      <wd-datetime-picker ref="endDatePicker" v-model="endDate" title="选择结束日期" type="date" :min="startDate" :max="today" @confirm="onEndDateConfirm" />
    </view>
  </view>
</template>

<script>
export default {
  name: "DateRangeSelector",
  props: {
    // 初始开始日期
    initialStartDate: {
      type: Number,
      default: () => {
        const lastMonth = new Date();
        lastMonth.setMonth(lastMonth.getMonth() - 1);
        return lastMonth.getTime();
      },
    },
    // 初始结束日期
    initialEndDate: {
      type: Number,
      default: () => Date.now(),
    },
  },
  data() {
    const today = new Date();

    return {
      showPopup: false,
      startDate: this.initialStartDate,
      endDate: this.initialEndDate,
      today: today.getTime(),
      currentFilter: -1, // -1 表示自定义日期范围
      quickFilters: [
        { name: "今日", days: 0 },
        { name: "本周", days: 7 },
        { name: "本月", days: 30 },
        { name: "三个月", days: 90 },
        { name: "半年", days: 180 },
        { name: "全部", days: -1 },
      ],
    };
  },
  methods: {
    togglePopup() {
      this.showPopup = !this.showPopup;
    },
    closePopup() {
      this.showPopup = false;
    },
    formatDate(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${month}月${day}日`;
    },
    openStartDatePicker() {
      this.$refs.startDatePicker.open();
    },
    openEndDatePicker() {
      this.$refs.endDatePicker.open();
    },
    onStartDateConfirm({ value }) {
      this.startDate = value;
      this.currentFilter = -1; // 切换到自定义日期范围
    },
    onEndDateConfirm({ value }) {
      this.endDate = value;
      this.currentFilter = -1; // 切换到自定义日期范围
    },
    applyQuickFilter(index) {
      this.currentFilter = index;
      const filter = this.quickFilters[index];

      const end = new Date();
      end.setHours(23, 59, 59, 999);
      this.endDate = end.getTime();

      if (filter.days === -1) {
        // 全部数据，设置一个很早的开始日期
        const start = new Date("2020-01-01");
        this.startDate = start.getTime();
      } else if (filter.days === 0) {
        // 今日
        const start = new Date();
        start.setHours(0, 0, 0, 0);
        this.startDate = start.getTime();
      } else {
        const start = new Date();
        start.setDate(start.getDate() - filter.days + 1); // +1 是为了包含今天
        start.setHours(0, 0, 0, 0);
        this.startDate = start.getTime();
      }
    },
    confirmDateRange() {
      this.closePopup();
      this.$emit("change", this.startDate, this.endDate);
    },
  },
};
</script>

<style lang="scss" scoped>
.date-range-selector {
  position: relative;
}

.date-range {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .date-range-text {
    flex: 1;
    font-size: 13px;
    color: #333;
  }

  .date-range-icon {
    color: #999;
    transition: transform 0.3s;

    &.rotate {
      transform: rotate(180deg);
    }
  }
}

.date-popup {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    .popup-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .popup-content {
    padding: 16px;
  }
}

.quick-filters {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  .filter-item {
    width: calc(33.33% - 8px);
    margin: 0 4px 8px 4px;
    padding: 8px 0;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;

    &.active {
      background-color: #ff8c00;
      color: #fff;
    }
  }
}

.custom-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .date-input {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 10px;

    .date-label {
      display: block;
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .date-value {
      font-size: 14px;
      color: #333;
    }
  }

  .date-separator {
    margin: 0 10px;
    color: #999;
  }
}

.confirm-button {
  margin-top: 20px;
}
</style>
